<!--
 * @Author: liucong19
 * @Date: 2021-07-16 18:25:33
 * @LastEditTime: 2021-07-22 08:53:04
 * @LastEditors: liucong19
 * @Description: 播放 HLS 流
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>播放 HLS 流</title>
  <style>
    .video-container {display: flex; justify-content: center; align-items: center;}
  </style>
</head>
<body>
  <p>HLS(HTTP Live Streaming) 是一个由 Apple 公司提出的基于 HTTP 的流媒体传输协议。视频的封装格式是 TS，编码格式是 H.264/ACC，除了定义 TS 视频文件本身，还定义了用来控制播放的 m3u8 文本文件。</p>
  <p>移动端大部分浏览器都支持，可以在移动端浏览器直接使用 video 标签直接加载一个 m3u8 文件播放视频或者直播。</p>
  <p>PC 端只支持苹果的 Safari 浏览器，其他浏览器想播放需要引入第三方库 hls.js。</p>

  <div class="video-container">
    <video id="video" width="800" height="450" controls ></video> 
  </div>

  <script src="lib/hls.js"></script> 
  <script type="module">
    // IE11 不支持 import / export 语法
    import sources from './sources.js'

    // 获取 video 标签
    let video = document.querySelector('#video')

    // hls实时流
    let hlsUrl = sources.hls[3]

    if (Hls.isSupported()) { 
      
      // 创建实例
      let hls = new Hls()

      // 加载直播源
      hls.loadSource(hlsUrl)
      hls.attachMedia(video)

      // 监听事件
      hls.on(Hls.Events.MANIFEST_PARSED, () => {

        // 静音
        video.muted = true
        
        // 播放
        video.play()
      })
    }

  </script>
</body>
</html>